<template>
  <div class="hello">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller" height="100%">
      <!--      <ul>-->
      <!--        <li v-for="(item,i) in data_list" :key="i">-->
      <!--          <a @click="backToTop(item.id)"> {{item.group_name}}</a>-->
      <!--        </li>-->
      <!--      </ul>-->


      <ul>
        <li>{{name}}----{{age}}</li>
        <li>{{nameGet}}</li>
      </ul>
      <br>

      <button @click="say">我是按钮1</button>
      <!--这里通过parentsay将父组件的say方法传递给了子组件-->
      <!--这里将父组件的name通过parentname传递给了子组件-->
      <son :parentname="name" :abc="age" @parentsay="say"></son>
    </scroller>


  </div>
</template>
<script>

  import son from '@/components/son/son'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        data_list: [],
        page: 1,
        pageSize: 500,
        noDate: false, //判断是否数据全部加载完成 true为全部加载完

        name: "wqd",
        age: 21
      }
    },
    components: {son},
    created() {
    },
    computed: {
      ...mapGetters([
        'nameGet',
      ])
    },
    methods: {
      say(e) {
        console.log(e)
      },
      backToTop(id) {
        this.$router.push(`/test/` + id)
      },
      // 获取数据
      getData() {

        // this.$store
        //   .dispatch("goods/getGoods", {
        //     $net: this.$api.goods.getGoods,
        //     params: []
        //   })
        //   .then(res => {
        //     debugger;
        //   });


        //分发action中的add方法
        this.$api.goods.getGoods({page: this.page, limit: this.pageSize}).then(res => {
          //这一步是判断你当前请求的这一页数据是不是最后一页，如果是最后一页就不能请求了
          if (this.page == res.data.last_page) {
            this.noDate = true;
          } else {
            this.page++;
          }
          // 判断是下拉刷新还是上拉加载（这一步也是比较巧妙的，当然也很好理解）
          if (this.page == 1) {
            this.data_list = res.data.data;
          } else {
            this.data_list = this.data_list.concat(res.data.data)
          }

        }).catch(err => {
          alert(err)
        })
      },
      // 下拉刷新
      refresh() {
        this.page = 1;//重置页数刷新每次页数都是第一页
        this.noDate = false;//重置数据判断
        this.getData();
        this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈

      },
      // 上拉加载
      infinite(done) {
        if (this.noDate) {
          this.$refs.myscroller.finishInfinite(true);//这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
        } else {
          this.getData();
          done();//进行下一次加载操作
        }
      },
    }
  }
</script>
<style scoped>

</style>
